<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style type="text/css">
			/*
			::after  在元素内部的后面插入内容
			::before 在元素内部的前面插入内容 
			*/
			.ww {
				width: 200px;
				height: 200px;
				background-color: #ffff00;
			}

			.ww::after {
				content: '猪';
			}

			.ww::before {
				content: '我';
			}

			/* 伪元素制作字体图标 */
			/* 字体声明 */
			@font-face {
				font-family: 'icomoon';
				src: url('fonts/icomoon.eot?at70xw');
				src: url('fonts/icomoon.eot?at70xw#iefix') format('embedded-opentype'),
					url('fonts/icomoon.ttf?at70xw') format('truetype'),
					url('fonts/icomoon.woff?at70xw') format('woff'),
					url('fonts/icomoon.svg?at70xw#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
				font-display: block;
			}

			.aa::after {
				position: absolute;
				top: 10px;
				right: 20px;
				font-family: 'icomoon';
				content: '';
				font-size: 20px;
				color: red;
			}

			.aa {
				position: relative;
				width: 500px;
				height: 40px;
				border: 2px solid #00FF00;
			}
		</style>
	</head>
	<body>
		<div class="ww">是</div>
		<hr>
		<div class="aa"></div>
	</body>
</html>
